<!DOCTYPE html>
<html>
<head>
<title>Series Resistor Circuit</title>
</head>
<body>
<canvas id="circuitCanvas" width="500" height="300"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // Style and font settings
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Circuit dimensions
    const x0 = 50;
    const y0 = 60;
    const circuitW = 400;
    const circuitH = 180;
    const resW = 60;
    const resH = 24; // Height of resistor zigzag

    // Resistor drawing function
    function drawResistor(x, y, w, h) {
        ctx.beginPath();
        ctx.moveTo(x, y);
        // This sequence creates a zigzag pattern similar to the image.
        ctx.lineTo(x + w * 0.1, y - h / 2);
        ctx.lineTo(x + w * 0.3, y + h / 2);
        ctx.lineTo(x + w * 0.5, y - h / 2);
        ctx.lineTo(x + w * 0.7, y + h / 2);
        ctx.lineTo(x + w * 0.9, y - h / 2);
        ctx.lineTo(x + w, y);
        ctx.stroke();
    }

    // --- Draw Circuit Components ---

    // Battery
    const battX = x0;
    const battY = y0 + circuitH / 2;
    const plateWidth = 24;
    const plateGap = 15;

    // Wires connecting to the battery
    ctx.beginPath();
    ctx.moveTo(battX, y0 + circuitH); // from bottom wire
    ctx.lineTo(battX, battY + plateGap / 2); // to negative plate connection point
    ctx.moveTo(battX, y0); // from top wire
    ctx.lineTo(battX, battY - plateGap / 2); // to positive plate connection point
    ctx.stroke();

    // Positive terminal (long, thin)
    ctx.beginPath();
    ctx.moveTo(battX - plateWidth / 2, battY - plateGap / 2);
    ctx.lineTo(battX + plateWidth / 2, battY - plateGap / 2);
    ctx.stroke();

    // Negative terminal (short, thick)
    ctx.save();
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(battX - plateWidth / 4, battY + plateGap / 2);
    ctx.lineTo(battX + plateWidth / 4, battY + plateGap / 2);
    ctx.stroke();
    ctx.restore();

    // Battery label
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.textAlign = 'right';
    ctx.fillText('ε,r', battX - 25, battY);

    // Main circuit wires (bottom and right)
    ctx.beginPath();
    ctx.moveTo(x0, y0 + circuitH);
    ctx.lineTo(x0 + circuitW, y0 + circuitH);
    ctx.lineTo(x0 + circuitW, y0);
    ctx.stroke();

    // Top part of the circuit with resistors
    const topY = y0;
    let currentX = x0;

    // Wire before first resistor
    ctx.beginPath();
    ctx.moveTo(currentX, topY);
    currentX += 80;
    ctx.lineTo(currentX, topY);
    ctx.stroke();

    // First Resistor
    const res1X = currentX;
    drawResistor(res1X, topY, resW, resH);
    // Label for first resistor
    ctx.font = '24px "Times New Roman"'; // Non-italic for 'R'
    ctx.textAlign = 'center';
    ctx.fillText('R', res1X + resW / 2, topY - 28);
    currentX += resW;

    // Wire between resistors
    ctx.beginPath();
    ctx.moveTo(currentX, topY);
    currentX += 20;
    ctx.lineTo(currentX, topY);
    ctx.stroke();

    // Second Resistor
    const res2X = currentX;
    drawResistor(res2X, topY, resW, resH);
    // Label for second resistor
    ctx.fillText('R', res2X + resW / 2, topY - 28);
    currentX += resW;
    
    // Wire after second resistor, leading to ellipsis
    ctx.beginPath();
    ctx.moveTo(currentX, topY);
    ctx.lineTo(currentX + 15, topY);
    ctx.stroke();

    // Ellipsis
    ctx.font = 'bold 24px "Times New Roman"';
    ctx.fillText('...', currentX + 40, topY);
    
    // Wire connecting from ellipsis to the rest of the circuit
    ctx.beginPath();
    ctx.moveTo(currentX + 65, topY);
    ctx.lineTo(x0 + circuitW, topY);
    ctx.stroke();

</script>
</body>
</html>